<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>数据录入</title>
    <link href="magicalcoder/css/layui.css" rel="stylesheet" />
    <link href="magicalcoder/magicalcoder.css" rel="stylesheet" />
    <script src="magicalcoder/json3.min.js"></script>
    <script src="magicalcoder/echarts.min.js"></script>
    <script src="magicalcoder/dataTool.min.js"></script>
    <script src="magicalcoder/layui.all.js"></script>
    <script src="magicalcoder/common.js"></script>
    <script src="magicalcoder/magicalcoder.js"></script>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body  class="layui-form" >
<div id="magicalDragScene" class="mc-root mc-ui-absolute-pane" style="background-color: rgb(252, 250, 250);">提交
    <span class="mc-ui-geometry-char" style="height: 100px; width: 100%; position: absolute; left: -0.159236%; top: -0.285714%; background-color: rgb(1, 170, 237);"></span>
    <span class="mc-ui-geometry-char" style="height: 20px; width: 300px; position: absolute; left: 4.7%; top: 3.14286%; color: rgb(249, 246, 246); font-size: 30px;">疫情数据统计分析系统</span>
    <table class="layui-table" style="position: absolute; left: -0.6%; top: 12.8571%; width: 20%;">
        <thead>
        <tr>
            <th style="background-color: rgb(10, 112, 207); color: rgb(255, 255, 255); font-size: 16px;">数据管理</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <a style="width: 20%; height: 30px; font-size: 15px; color: rgb(153, 153, 153);" href="sjlr.html">数据录入</a>
            </td>
        </tr>
        <tr>
            <td>
                <a style="color: rgb(153, 153, 153);" href="sjcx.html">数据查询</a>
            </td>
        </tr>
        <tr>
            <td>
                <a style="color: rgb(153, 153, 153);" href="tbzs.html">图表展示</a>
            </td>
        </tr>
        </tbody>
    </table>
    <table class="layui-table" style="position: absolute; left: -0.4%; top: 39.7143%; width: 20%;">
        <thead>
        <tr>
            <th style="color: rgb(248, 245, 245); background-color: rgb(10, 112, 207); width: 20%;">系统管理</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <a style="color: rgb(153, 153, 153);" href="yhlr.html">用户录入</a>
            </td>
        </tr>
        <tr>
            <td>
                <a style="color: rgb(153, 153, 153);" href="yhbj.html">用户编辑</a>
            </td>
        </tr>
        </tbody>
    </table>
    <a class="layui-btn" style="position: absolute; left: 82%; top: 6%; width: 10%; height: 40px; font-size: 15px;"
     onclick="window.location.href='index.html'">退出登录</a>
    <input name="createTime" class="magicalcoder-laydate layui-input" style="position: absolute; left: 21.4%; top: 22.8571%; width: 20%;" type="text" autocomplete="off" lay-verify="magicalCoderVerify" id="dateInput"/>
    <table class="layui-table" style="position: absolute; left: 21.0191%; top: 31.8571%; width: 79%;">
        <thead>
        <tr>
            <th>省份</th>
            <th>确诊人数</th>
            <th>疑似人数</th>
            <th>治愈人数</th>
            <th>死亡人数</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <select>
                    <option value="上海">上海</option>
                    <option value="云南">云南</option>
                    <option value="内蒙古">内蒙古</option>
                    <option value="北京">北京</option>
                    <option value="台湾">台湾</option>
                    <option value="吉林">吉林</option>
                    <option value="四川">四川</option>
                    <option value="天津">天津</option>
                    <option value="宁夏">宁夏</option>
                    <option value="安徽">安徽</option>
                    <option value="山东">山东</option>
                    <option value="山西">山西</option>
                    <option value="广东">广东</option>
                    <option value="广西">广西</option>
                    <option value="新疆">新疆</option>
                    <option value="江苏">江苏</option>
                    <option value="江西">江西</option>
                    <option value="河北">河北</option>
                    <option value="河南">河南</option>
                    <option value="浙江">浙江</option>
                    <option value="海南">海南</option>
                    <option value="湖北">湖北</option>
                    <option value="湖南">湖南</option>
                    <option value="澳门">澳门</option>
                    <option value="甘肃">甘肃</option>
                    <option value="福建">福建</option>
                    <option value="西藏">西藏</option>
                    <option value="贵州">贵州</option>
                    <option value="辽宁">辽宁</option>
                    <option value="重庆">重庆</option>
                    <option value="陕西">陕西</option>
                    <option value="青海">青海</option>
                    <option value="香港">香港</option>
                    <option value="黑龙江">黑龙江</option>                    
                </select>
            </td>
            <td>
                <input class="layui-input" id="currentConfirmedCount" type="text" autocomplete="off"/>
            </td>
            <td>
                <input class="layui-input" id="suspectedCount" type="text" autocomplete="off"/>
            </td>
            <td>
                <input class="layui-input" id="curedCount" type="text" autocomplete="off"/>
            </td>
            <td>
                <input class="layui-input" id="deadCount" type="text" autocomplete="off"/>
            </td>
        </tr>
        </tbody>
    </table>
    <a class="layui-btn" style="position: absolute; left: 44.2%; top: 22.5714%;" id="passBtn">提 交</a>
    <span class="mc-ui-geometry-char" style="height: 20px; width: 200px; position: absolute; left: 21.4%; top: 16.1429%; font-size: 20px;">请选择输入日期</span>
</div>
<script src="sjlr.js"></script>
<script>
    //以下脚本为标签属性转换成layui组件的还原过程
    //调试:打开浏览器控制台(F12),在代码中某行增加 debugger 即可调试
    var $ = layui.jquery, laytpl = layui.laytpl, laydate = layui.laydate, form = layui.form, layedit = layui.layedit, slider = layui.slider, element = layui.element, colorpicker = layui.colorpicker, upload = layui.upload, rate = layui.rate, carousel = layui.carousel, table = layui.table, flow = layui.flow;
    var magicalDragLayuiUtil = {
        rebuildLayUiControls: function () {
            var _t = this;
            //日期
            $(".magicalcoder-laydate").each(function (idx, item) {
                laydate.render(_t.iteratorAttr({
                    elem: item
                }, item));
            })
            //富文本
            $(".magicalcoder-layedit").each(function (idx, item) {
                var mcDataId = $(item).attr("id");
                if (mcDataId) {
                    layedit.build(mcDataId, {
                        height: 300
                    });
                }
            })
            //外键
            $(".magicalcoder-foreign-select2").each(function (idx, item) {
                var mcDataId = $(item).attr("id");
                if (mcDataId) {
                    $("#" + mcDataId).select2({
                        allowClear: true,
                        width: "150px",
                        delay: 500,
                    });
                }
            })
            //颜色选择器
            $(".magicalcoder-color-picker").each(function (idx, item) {
                colorpicker.render(_t.iteratorAttr({
                    elem: $(item)}, item));
            })
            //上传组件
            $(".magicalcoder-layupload").each(function (idx, item) {
                upload.render(_t.iteratorAttr({
                    elem: $(item)}, item));
            })
            //滑块
            $(".magicalcoder-slider").each(function (idx, item) {
                slider.render(_t.iteratorAttr({
                    elem: $(item)}, item));
            })
            //评分
            $(".magicalcoder-rate").each(function (idx, item) {
                rate.render(_t.iteratorAttr({
                    elem: $(item)}, item));
            })
            //轮播
            $(".layui-carousel").each(function (idx, item) {
                carousel.render(_t.iteratorAttr({
                    elem: $(item)}, item));
            })
            //流加载
            $(".magicalcoder-flow").each(function (idx, item) {
                flow.load(_t.iteratorAttr({
                    elem: $(item)}, item));
            })
            //代码
            $(".magicalcoder-code").each(function (idx, item) {
                layui.code(_t.iteratorAttr({
                    elem: $(item)}, item));
            })
            //弹窗
            $(".magicalcoder-layer").each(function (idx, item) {
                //先隐藏起来
                $(this).next().hide();
                $(this).click(function () {
                    var config = _t.iteratorAttr({
                        elem: $(item)}, item);
                    var type = config.type;
                    if (type + '' == 1) {
                        config.content = $(this).next();
                        if (!config.content.hasClass("magicalcoder-layer-content")) {
                            config.content = config.content.find(".magicalcoder-layer-content")
                        }                }
                    if (config.btn) {
                        config.btn = config.btn.split(",")
                    }
                    if (config.area) {
                        config.area = config.area.split(",")
                    }
                    layer.open(config)
                })
            })
            //动态表格 我们单独封装了layui-table的初始化方式 至于数据排序 返回格式 等操作请根据你的具体环境自行封装
            $(".magicalcoder-table").each(function (idx,
                                                    item) {
                var cols = [];
                //读取列配置
                $(this).find(".magicalcoder-table-th").each(function (i, th) {
                    cols.push(_t.iteratorAttr({
                        title: $(this).text()}, th));
                })
                var tableConfig = _t.iteratorAttr({
                        elem: $(item),
                        cols: [cols]},
                    item);
                //初始化表格 至于返回的数据格式 您可以根据自己的系统自行改造 这里仅做一个示例 参考js\\data\\list.json
                table.render(tableConfig);
            })
            //部分组件初始化
            element.init();
            //表单初始化
            form.render();
        },
        //将标签上的属性 转换成layui函数初始化时的参数名:参数值
        iteratorAttr: function (renderConfig, dom) {
            var attrs = dom.attributes;
            for (var i = 0; i < attrs.length; i++) {
                var attr = attrs[i];
                var name = attr.name;
                var value = attr.value;
                if (name.indexOf("mc-") === 0) {
                    name = name.replace("mc-attr-", '');
                    name = name.replace("mc-event-", '');
                    if (name.indexOf('str-') === 0) {
                        name = name.replace('str-', '');
                    } else if (name.indexOf('bool-') === 0) {
                        name = name.replace('bool-', '');
                        value == 'true' || value === '' ? value = true: value = value;
                        value == 'false' ? value = false: value = value;
                    } else if (name.indexOf('num-') === 0) {
                        name = name.replace('num-', '');
                        if (value !== '' && !isNaN(value)) {
                            value = parseFloat(value);
                        }
                    } else if (name.indexOf('json-') === 0) {
                        name = name.replace('json-', '');
                        if (value !== '') {
                            value = JSON.parse(value);
                        }
                    }
                    renderConfig[this.htmlAttrNameToTuoFeng(name)] = value;
                }
            }
            return renderConfig;
        },
        //user-name -> userName html上的标签名转换成驼峰名称
        htmlAttrNameToTuoFeng: function (name) {
            var arr = name.split("-");
            var newArr = []
            for (var i = 0; i < arr.length; i++) {
                if (i != 0) {
                    if (arr[i] != '') {
                        newArr.push(this.firstCharToUpLower(arr[i]));
                    }
                } else {
                    newArr.push(arr[i]);
                }
            }
            return newArr.join('');
        },
        //首字母大写
        firstCharToUpLower: function (name) {
            var arr = name.split("");
            arr[0] = arr[0].toUpperCase();
            return arr.join('');
        },
    }
    magicalDragLayuiUtil.rebuildLayUiControls();
    //echarts自动初始化
    new McECharts().render();
    //functions-begin
    //functions-end
</script>
</body>

</html>
